<template>
    <div class="bigg">
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="topbg">
            <img @click="viewPic(shopxqlist.large_img)" :src="shopxqlist.large_img" alt="" style="width: 100%;">
        </div>
        <div class="xqbigbox">

            <div class="clearfix title" style="padding-left: 18px;">
                <div class="fl" style=" float: left;padding-left: 12px;padding-top: 20px;">
                    <div class="name" style=" padding-bottom: 8px;font-size: 20px;font-weight: 600;color: #182078;">
                        {{ shopxqlist.name }}</div>
                    <div class="enname" style="font-size: 12px;color: #ccc;margin-bottom: 20px;">
                        {{ shopxqlist.enname }}</div>
                </div>
                <div class="price"
                    style="float: right;padding-top: 20px;padding-right: 20px; font-size: 20px;font-weight: 600;color: #e7651a;">
                    ￥{{ shopxqlist.price }}</div>
            </div>

            <div class="rule" v-for="(item, index) in shopxqlist.new">
                <div class="rule-title">{{ item.title }}</div>
                <div class="subrules" v-for="(i, j) in item.subRules">
                    <div class="subrules-item" @click="changeRules(item, j)" :class="{ activeCss: item.activeIndex == j }">
                        {{ i.title }}</div>
                </div>
            </div>
            <!-- 选择数量 -->
            <div class="num">
                <div class="sls">选择数量</div>
                <div class="jij">
                    <van-stepper v-model="countNum" theme="round" button-size="22" disable-input max="20" />
                </div>
            </div>

            <!-- //商品描述 -->
            <div class="shopms">
                商品描述
                <div class="ms" v-for="(item, index) in shopxqlist.desc ">
                    {{ index + 1 }},{{ item }}
                </div>
            </div>

        </div>
        <div class="dibu">
            <van-action-bar>
                <van-action-bar-icon icon="cart" text="购物袋" :badge="shopCount" @click="getShopcart" />
                <van-action-bar-icon icon="like" :color="islike ? 'red' : '#adadad'" :text="islike ? '已收藏' : '未收藏'"
                    @click="rec(Propid)" />
                <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="addShopcart(Propid)" />
                <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
            </van-action-bar>

        </div>


    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { get, post } from "../request";
import { useRoute, useRouter } from "vue-router";
import { showImagePreview, showToast } from "vant";
export default {
    setup() {
        //页面刷新，查询是否收藏过该商品  求findlike 的pid     
        // 获取个数
        const router = useRouter()
        //点击显示图片预览
        const viewPic = (pic) => {
            showImagePreview({
                images: [
                    pic
                ],
                overlayStyle: {
                    backgroundColor: 'black'
                }
            })
        }
        //点击变色
        //默认高亮的下标       
        const changeRules = (item, i) => {
            item.activeIndex = i
        }
        //获取从menu页面传过来的id
        const route = useRoute();
        const Propid = route.query.id;
        console.log("pid", Propid);
        //点击返回键返回上一页
        const onClickLeft = () => history.back()
        //存放商品详情     
        const shopxqlist = ref([])
        const shoplist = ref([])
        const getShopxq = async (Propid) => {
            const res = await get("/productDetail", {
                params: {
                    pid: Propid
                }
            })
            //赋值之前处理之前数据
            //切割商品描述
            res.data.result[0].desc = res.data.result[0].desc.split(/\n/)
            //处理商品规格
            //存放所有商品规格
            const allRulesData = ref([])
            //构造子规格对象(判空,去掉没有子规格的规格标题)
            const rulesData = ['cream', 'milk', 'sugar', 'tem']
            rulesData.forEach((item) => {
                if (!res.data.result[0][item]) {
                    return
                }
                const diyRulesData = reactive({
                    //规格标题
                    title: res.data.result[0][`${item}_desc`],
                    //默认选中
                    activeIndex: 0,
                    //子规格数组
                    subRules: []
                })
                //处理子规格数据(切割后规格数据变成一个数组)
                const newRules = res.data.result[0][item].split(/\//)
                //循环选出每一个子规格数据,以对象的形式存入子规格数组
                newRules.forEach((item) => {
                    diyRulesData.subRules.push({ title: item })
                })
                console.log(diyRulesData);
                allRulesData.value.push(diyRulesData)

            })
            res.data.result[0].new = allRulesData.value
            //赋值
            shopxqlist.value = res.data.result[0]
            shoplist.value = res.data.result
            console.log("商品详情信息", res);
        }
        getShopxq(Propid)
        //点击跳转到购物车
        const getShopcart = async () => {
            router.push({ name: "Shopbag" })
        }
        // const pay =async() =>{
        //     router.push({name:"Pay"})
        // }
        //商品数量
        const countNum = ref(1)
        //加入购物车
        const addShopcart = async (pid) => {
            //获取选中规格
            //存放所有选中规格
            const allRules = ref([]);
            shopxqlist.value.new.forEach((item) => {
                allRules.value.push(item.subRules[item.activeIndex].title)
            })
            const res = await post('/addShopcart', {
                // img:
                // shopxqlist.value.img,
                pid,
                count: countNum.value,
                rule: allRules.value.join('/'),
                tokenString: JSON.parse(localStorage.getItem('tokens'))
            })
            console.log("加入购物车", res.data);
            if (res.data.code == 3000) {
                showToast(res.data.msg)
            }
            //用户未登录
            if (res.data.code == 700) {
                //延时跳转
                route.push({ name: "LoginReg" })
            }
        }
        //查看购物车数量
        //存储购物车数量
        const shopCount = ref(0)
        const shopcartCount = async () => {
            const res = await get('/shopcartCount', {
                params: {
                    tokenString: JSON.parse(localStorage.getItem('tokens'))
                }
            })
            shopCount.value = res.data.result
            console.log("购物车数量", shopCount.value);

        }
        shopcartCount()
        //点击收藏
        //收藏状态
        const islike = ref(false);
        //点击收藏/取消收藏
        const rec = async (pid) => {
            const url = islike.value ? '/notlike' : '/like';
            const res = await post(url, {
                pid,
                tokenString: JSON.parse(localStorage.getItem('tokens'))
            })
            console.log("收藏成功", res.data);
            //用户未登录
            if (res.data.code == 700) {
                //延时跳转
                router.push('LoginReg');
            }
            if (res.data.code == 800) {
                showToast(res.data.msg)
                islike.value = true
            }
            if (res.data.code == 900) {
                showToast(res.data.msg)
                islike.value = false
            }
        }
        //查询商品是否收藏
        const find = async (pid) => {
            const res = await get('/findlike', {
                params: {
                    pid,
                    tokenString: JSON.parse(localStorage.getItem('tokens'))
                }
            })
            console.log("查询是否收藏", res.data);
            if (res.data.result.length != 0) {
                islike.value = true
            }
        }
        find(Propid)
        return {
            // ,booles,
            rec, islike,
            viewPic, addShopcart, countNum, shoplist, changeRules, getShopcart,
            Propid, onClickLeft, getShopxq, shopxqlist, shopCount,
            // pay
        };
    },
}
</script>

<style lang="less" scoped>
.bigg {
    position: relative;

}

.topbg {
    width: 100%;
    z-index: -1;
}

.xqbigbox {
    //   margin-left: 10px;
    position: absolute;
    width: 94%;
    margin-left: 3%;
    background-color: #fff;
    // z-index: 3;
    top: 265px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 400px;
    overflow: scroll;
}

.xqtitle {
    display: flex;
    /* 上边 | 右边 | 下边 | 左边 */

    height: 80px;
    //background-color: aquamarine;
    // margin-bottom: ;
}

.xq-tb {
    margin: 10px 20px 0 20px;


    .xq1 {
        margin: 10px 0 5px 0;
        font-size: 16px;

    }

    .xq2 {
        font-size: 14px;
    }
}

.xq-xb {
    position: absolute;
    right: 20px;
    top: 30px;
    font-size: 15px;
    color: #0c34ba;

}

.rule {
    display: flex;
    height: 30px;
    width: 300px;
    // background-color: antiquewhite;
    margin: 10px 0 0 20px;
    line-height: 30px;

    .rule-title {
        width: 55px;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        color: #666;
        padding-left: 12px;
    }

}

.subrules {
    margin-left: 20px;
    display: flex;
    text-align: center;
    line-height: 30px;

    .subrules-item {
        width: 60px;
        height: 30px;
        // background-color: #adadad;
        border-radius: 30px;
    }
}

.activeCss {
    background-color: #0c34ba;
    color: #fff;
}

.num {

    width: 94%;
    margin-left: 3%;
    margin: 10px 0 0 20px;
    height: 50px;
    // background-color: aliceblue;
    display: flex;
    width: 94%;
    border-bottom: #e4e0e0 solid 1px;
    border-top: #e4e0e0 solid 1px;
    font-size: 15px;

    .sls {

        line-height: 50px
    }

    .jij {
        display: flex;
        position: absolute;
        right: 20px;
        line-height: 50px;

        // margin-top: 20px;
        .count {
            margin: 0 10px;
        }


    }


}

.shopms {
    margin: 10px 0 0 20px;
    font-size: 14px;

    .ms {
        font-size: 13px;
        margin-top: 10px;
        white-space: pre-wrap;
    }

}

.dibu {
    z-index: 99;
}</style>